{extend name="../apps/admin/view/public/base.html"/}
{block name="style"}
    {include file="../apps/admin/view/builder/style.html" /}
{/block}
{block name="main"}
    {notempty name="tab_nav"}
        <div class="builder-tabs builder-form-tabs">
            <ul class="nav nav-tabs">
                {volist name="tab_nav.tab_list" id="tab"}
                    <li class="<php>if($tab_nav['current_tab'] == $key) echo 'active';</php>"><a href="{$tab.href}">{$tab.title}</a></li>
                {/volist}
            </ul>
        </div>
    {/notempty}

    <div class="builder sort sortbuilder-box mt-10">
        <form action="{$post_url}" method="post" class="sort-builder form-horizontal">

                <div class="form-group clearfix">

                    <div class="col-xs-2 with-padding">
                        <select value="" size="15" class="form-control" style="width: 100%">
                            {volist name="list" id="vo"}
                                <option class="ids" title="{$vo.title}" value="{$vo.id}">{$vo.title}</option>
                            {/volist}
                        </select>
                    </div>
                    <div class="col-xs-1">
                        <button class="top btn btn-default btn-block" type="button">第一</button>
                        <button class="up btn btn-default btn-block" type="button">上移</button>
                        <button class="down btn btn-default btn-block" type="button">下移</button>
                        <button class="bottom btn btn-default btn-block" type="button">最后</button>
                    </div>
                </div>
                    <div class="form-group sort_bottom with-padding">
                        <div class="col-md-6 ">
                        <input type="hidden" name="ids">
                             {volist name="buttonList" id="button"}
                                    <button {$button.attr}>{$button.title}</button>  &nbsp;&nbsp;
                             {/volist}

                      </div>
                  </div>
        </form>
    </div>
{/block}

{block name="script"}
    <script type="text/javascript">
        $(function(){
            sort();
            $(".top").click(function(){
                rest();
                $("option:selected").prependTo("select");
                sort();
            })
            $(".bottom").click(function(){
                rest();
                $("option:selected").appendTo("select");
                sort();
            })
            $(".up").click(function(){
                rest();
                $("option:selected").after($("option:selected").prev());
                sort();
            })
            $(".down").click(function(){
                rest();
                $("option:selected").before($("option:selected").next());
                sort();
            })
            $(".search").click(function(){
                var v = $("input").val();
                $("option:contains("+v+")").attr('selected','selected');
            })
            function sort(){
                $('option').text(function(){return ($(this).index()+1)+'.'+$(this).text()});
            }

            //重置所有option文字。
            function rest(){
                $('option').text(function(){
                    return $(this).text().split('.')[1]
                });
            }

            //获取排序并提交
            $('.sort_confirm').click(function(){
                var arr = new Array();
                $('.ids').each(function(){
                    arr.push($(this).val());
                });
                $('input[name=ids]').val(arr.join(','));
                $.post(
                        $('form').attr('action'),
                        {
                            'ids' :  arr.join(',')
                        },
                        function(data){
                            if (data.status) {
                                updateAlert(data.info +',页面即将自动跳转~','success');
                            }else{
                                updateAlert(data.info,'error');
                            }
                            setTimeout(function(){
                                if (data.status) {
                                    if (data.url) {
                                        location.href = data.url;
                                    } else if ($(this).hasClass('no-refresh')) {
                                        $('#top-alert').find('button').click();
                                        $(this).removeClass('disabled').prop('disabled', false);
                                    } else {
                                        location.reload();
                                    }
                                    //$('.sort_cancel').click();
                                }else{
                                        if (data.url) {
                                            location.href = data.url;
                                        } else {
                                            $('#top-alert').find('button').click();
                                            $(this).removeClass('disabled').prop('disabled', false);
                                        }
                                }
                            },1500);
                        },
                        'json'
                );
            });
        })
    </script>
{/block}